<template>
    <div class="common-layout">
        <el-container>
            <h1>员工管理</h1>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item>
                                <el-input v-model="formInline.username" placeholder="用户账号" />
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="formInline.utype" placeholder="账号状态">
                                    <el-option label="锁定" value="1" />
                                    <el-option label="正常" value="2" />
                                    <el-option label="已注销" value="3" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="formInline.uauthority" placeholder="用户列表">
                                    <el-option label="店员" value="1" />
                                    <el-option label="店长" value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="select" color="#5B6BE8">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="reset" color="#5B6BE8">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table :data="tableData" style="width: 100%;" empty-text="暂无数据"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" border>
                            <el-table-column prop="username" label="人员名称" width="150px" />
                            <el-table-column prop="utype" label="账号状态" width="150px" />
                            <el-table-column prop="uauthority" label="人员身份" width="150px" />
                            <el-table-column prop="identifyCard" label="用户身份证号" width="350px" />
                            <el-table-column prop="uaddress" label="人员住址" width="450px" />
                            <el-table-column prop="urate" label="员工评分" width="150px">
                                <el-rate v-model="urate" disabled text-color="#ff9900" />
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button color="#5B6BE8"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button color="#5B6BE8"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-container>
                </div>
            </el-main>
            <el-drawer v-model="drawer" title="添加/修改 人员" :direction="direction" :before-close="handleClose">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="人员名称">
                        <el-input v-model="formInline.username" placeholder="张三" />
                    </el-form-item>
                    <el-form-item label="账号状态">
                        <el-input v-model="formInline.utype" placeholder="输入数字 （正常1 锁定2 注销3）" />
                    </el-form-item>
                    <el-form-item label="人员身份">
                        <el-input v-model="formInline.uauthority" placeholder="输入数字 （员工1 店长2）" />
                    </el-form-item>
                    <el-form-item label="人员住址">
                        <el-input v-model="formInline.uaddress" placeholder="湖南省xxx市xxx县" />
                    </el-form-item>
                    <el-form-item label="员工评分">
                        <el-rate v-model="formInline.urate" clearable />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div style="flex: auto">
                        <el-button @click="cancelClick">取消</el-button>
                        <el-button type="primary" @click="confirmClick">提交</el-button>
                    </div>
                </template>
            </el-drawer>
        </el-container>
    </div>


</template>

<script>
    import { ElMessage } from 'element-plus'
    import { ElMessageBox } from 'element-plus'
    export default {
        name: 'userList',
        data() {
            return {
                formInline: {
                    username: '',
                    utype: '',
                    uauthority: '',
                    uaddress: '',
                    urate: '',
                    uid: '',
                    urate: 3
                },
                userpage: [],
                tableData: [],
                authority: sessionStorage.getItem("uauthority"),
                drawer: false,
                direction: "rtl",
                value: 0,
                urate: 3
            };
        },

        mounted() {
            this.select();
        },

        methods: {
            handleSizeChange() {
                this.reset();
            },
            handleCurrentChange() {
                this.reset();
            },
            reset() {
                this.formInline = {
                    username: '',
                    utype: '',
                    uauthority: '',
                }
                this.select();
            },
            select() {
                let that = this;
                this.$http.post('user/queryUser', that.formInline)
                    .then(function (response) {
                        response.data.map((item) => {
                            switch (item.uauthority) {
                                case 1: item.uauthority = '店员'; break;
                                case 2: item.uauthority = '店长'; break;
                            }
                            switch (item.utype) {
                                case 1: item.utype = '锁定'; break;
                                case 2: item.utype = '正常'; break;
                                case 3: item.utype = '已注销'; break;
                            }

                        });
                        that.tableData = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
            handleEdit(index, row) {
                this.drawer = true;
                console.log(row, "row");
                this.formInline.username = row.username
                this.formInline.uid = row.uid;
                this.formInline.uaddress = row.uaddress
                this.formInline.urate = row.urate
            },
            // 单个删除
            handleDelete(index, row) {
                var that = this;
                ElMessageBox.confirm(
                    '是否删除? （请谨慎考虑！）',
                    'Warning',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        that.$http.get('/user/' + (index + 1))
                            .then(function (response) {
                                console.log(response);
                                if (response.meta.status == 500) {
                                    ElMessage(response.meta.msg);
                                }
                                that.select();
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })

            },
            handleClose() {
                ElMessageBox.confirm('确定取消吗?')
                    .then(() => {
                        this.drawer = false;
                        this.formatone();
                    })
            },
            formatone() {
                this.formInline.username = ''
                this.formInline.utype = ''
                this.formInline.uauthority = ''
                this.formInline.uaddress = ''
                this.formInline.urate = ''
            },

            cancelClick() {
                this.drawer = false;
            },
            confirmClick() {
                ElMessageBox.confirm("确定添加吗？")
                    .then(() => {
                        let that = this;
                        that.$http.post("user/addPerson", that.formInline)
                            .then(function (result) {
                                that.select();
                                that.formatone();
                            })
                            .catch(function (error) {

                            })
                        that.drawer = false;
                    })
                    .catch(() => {

                    })
            },
            updatePerson() {
                this.drawer = true;
            }
        },
    };
</script>

<style lang="css" scoped>
    h1 {
        font-size: 30px;
        font-weight: 600;
        font-family: "微软雅黑";
        color: rgb(73, 72, 72);
        margin-bottom: 30px;
    }

    .el-main {
        padding: 0 !important;
        overflow: hidden;
    }

    .el-header {
        height: 50px;
        padding-left: 0;
    }


    .el-aside {
        overflow: hidden;
    }

    .el-form-item {
        margin-right: 10px;
    }

    .flex {
        margin-top: 20px;
    }

    /* 下方数据 */
    .bottom-header {
        height: 370px;

    }

    .el-table {
        margin-top: 20px;
        box-shadow: 0 0 5px rgb(195, 206, 217);
    }

    .bottom-bar {
        border-top: 1px solid silver;
    }

    .el-pagination {
        float: left;
        margin-top: 10px;
    }

    .bottom-bar>span {
        margin-top: 16px;
        display: inline-block;

    }

    .bar {
        border-top: 1px solid silver;
        line-height: 56px;
    }

    .number {
        color: red;
    }
</style>